<script setup lang="ts">
import { useCurrentStudentInfoStore } from '@/stores/modules/useCurrentStudentInfoStore'
import { message } from '@/utils/message'
import { navigateBack } from '@/utils/navigation'

const studentInfoStore = useCurrentStudentInfoStore()

// 开始学习
function handleStartLearning() {
  message.info('TODO 入学测评H5')
}

function toCourseList() {
  uni.navigateTo({
    url: '/pages/student/courseList/index?type=experience',
  })
}
</script>

<template>
  <view class="intro-page">
    <!-- {{ isEntranceTest }} -->
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="left" @click="navigateBack">
        <uni-icons type="left" size="20" color="#fff" />
        <text>{{ studentInfoStore.studentName }}</text>
      </view>
      <!-- <view class="right">
        <text class="nav-item " @click="toReviewWords">
          复习
        </text>
        <text class="nav-item" @click="toWordBook">
          单词本
        </text>
      </view> -->
    </view>

    <!-- 主要内容 -->
    <view class="content">
      <!-- 学习数据 -->
      <view class="study-stats">
        <text class="stat-text stat-text-small">
          恭喜吴*浅同学24小时学完 词库B1
        </text>
        <text class="stat-text ">
          智牛已入驻全国<text class="stat-text-bold">
            数百个城市
          </text>
        </text>
        <text class="stat-text stat-text-small">
          单日新学单词王诞生了   吴*新 <text class="stat-text-bold">
            786单词
          </text>
        </text>
        <text class="stat-text">
          恭喜李*锐同学复习768词，正确率<text class="stat-text-bold">
            96%
          </text>
        </text>
        <text class="stat-text stat-text-small">
          <text class="stat-text-bold">
            数亿条
          </text>学习记录构建五维记忆引擎
        </text>
      </view>

      <!-- 底部按钮 -->
      <view class="bottom-btns">
        <view class="welcome-text">
          欢迎来到<text class="welcome-text-bold">
            智牛英语
          </text>
        </view>
        <view v-if="studentInfoStore.isEntranceTest" class="button-group">
          <view class="button-link">
            入学测评报告
            <uni-icons type="right" class="right-icon" size="14" color="#fff" />
          </view>
        </view>

        <view v-if="!studentInfoStore.isEntranceTest" class="button-group" @click="toCourseList">
          <view class="button-link">
            开启智能背单词
            <uni-icons type="right" class="right-icon" size="14" color="#fff" />
          </view>
        </view>

        <button v-if="!studentInfoStore.isEntranceTest" class="primary-btn" @click="handleStartLearning">
          入学测评
        </button>
        <button v-if="studentInfoStore.isEntranceTest" class="primary-btn" @click="toCourseList">
          开启智能背单词
        </button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.intro-page {
    min-height: 100vh;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: var(--status-bar-height);
    background: url('@/static/images/experience-bg.png') no-repeat left center;
    background-size: cover;

    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 88rpx;
        margin-bottom: 20rpx;

        .left {
            display: flex;
            align-items: center;
            cursor: pointer;
            gap: 10rpx;
            font-size: 32rpx;
            color: #fff;
        }

        .right {
            display: flex;
            gap: 40rpx;

            .nav-item {
                font-size: 28rpx;
                color: #666;

                &.active {
                    color: #333;
                    font-weight: bold;
                }
            }
        }
    }

    .content {
        position: absolute;
        bottom: 50vh;
        right: 0;
        width: 100%;

        .study-stats {
            position: relative;
            height: 300rpx;
            width: 100%;
            margin-bottom: 40rpx;
            font-size: 28rpx;
            text-align: right;

            .stat-text {
                color: #fff;
                display: block;
                font-weight: normal;
                margin-bottom: 40rpx;
                &:nth-child(1){
                    padding-right: 110rpx;
                }
                &:nth-child(2){
                    padding-right: 100rpx;
                }
                &:nth-child(3){
                    padding-right: 110rpx;
                }
                &:nth-child(4){
                    padding-right: 40rpx;
                }
                &:nth-child(5){
                    padding-right: 100rpx;
                }
            }

            .stat-text-small{
                font-size: 24rpx;
                opacity: .8;
            }

            .stat-text-bold {
                font-weight: bold;
                color: #FFBC1B;
            }
        }

        .button-group {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30rpx;

            .button-link {
                color: #fff;
                margin: 0 auto;
                cursor: pointer;
                padding: 10rpx 0;
                font-size: 24rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: .8;
                text-align: center;
                .right-icon{
                    margin-left: 4rpx;
                }
            }
        }

        .bottom-btns {
            margin-top: 60rpx;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 60rpx 40rpx;

            .welcome-text {
                display: flex;
                color: #fff;
                font-size: 40rpx;
                font-weight: normal;
                align-items: center;
                justify-content: center;
                width: 100%;

                .welcome-text-bold {
                    font-weight: bold;
                    color: #FFBC1B;
                }
            }

            .primary-btn {
                background-color: #FFBC1B;
                color: #fff;
                border-radius: 40rpx;
                font-size: 32rpx;
                height: 88rpx;
                line-height: 88rpx;
                margin-bottom: 30rpx;

                &:hover{
                    background-color: #ffb400;
                }
            }
        }
    }
}
</style>
